﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Like.aspx.cs" Inherits="GoShopping.Like" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/css/Shopping%20cart.css" rel="stylesheet" />
    <script src="Content/js/vue.js"></script>
    <script src="Content/js/jquery-1.10.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul li, a {
            list-style: none;
            text-decoration: none;
        }

        body {
            background: #F5F5F5;
        }

        .header {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            border-bottom: 3px solid #00CBFD;
        }

            .header .header-logo {
                width: 50px;
                height: 50px;
                margin-left: 50px;
                margin-right: 50px;
            }

                .header .header-logo img {
                    width: 100%;
                    height: 100%;
                }

            .header .header-title h2 {
                float: left;
                font-weight: 400;
                color: #424242;
                margin-bottom: 0;
                font-size: 28px;
            }

            .header .header-title p {
                float: left;
                margin-left: 15px;
                margin-top: 15px;
                color: #757575;
            }

            .header .topbar-info a {
                text-decoration: none;
                color: #757575;
                margin-right: 20px;
            }

            .header .flex {
                flex: 1;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="header">
            <div class="header-logo">
                <img src="images/Logo.png" />
            </div>
            <div class="header-title">
                <h2>我的收藏</h2>
                <p>温馨提示：商品比较爆火，请尽快下单哦~</p>
            </div>
            <div class="flex"></div>
            <div class="topbar-info">
                <a href="UserInfo.aspx">返回>></a>
            </div>
        </div>
        <div class="content-list" v-if="this.goodsXinxi.length>0">

            <ul class="recommend-list">

               
                <li v-for="item in this.goodsXinxi">
                    <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                        <div class="recommend-img">
                            <img :src="item.GoodsPic" />
                        </div>
                        <div class="recommend-name">{{item.GoodsName}}</div>
                        <div class="recommend-price">￥{{item.GoodsPrice}}</div>
                        <div class="recommend-tips">------</div>
                    </a>
                    <div @click="del(item.LikeID)"  class="fudong" style="text-align:center;cursor:pointer">删除</div>
                </li>
                
            </ul>
        </div>
        <div v-else>
            <el-empty description="没有收藏的商品哦~"></el-empty>
        </div>
        
    </form>
</body>
</html>
<script type="module">
    import { sendAjaxCar1 } from './Content/js/FactoryCar.js'
    new Vue({
        el: "#form1",
        data: {
            obj: {},
            data1: {},
            goodsXinxi:[]
        },
        async created() {
            if (sessionStorage.getItem("UserID") != null) {
                var that = this
                that.obj.type = "POST"
                that.obj.url = "tools/Likeds.ashx"
                that.data1.t = "4"
                that.data1.UserID = sessionStorage.getItem("UserID")
                await sendAjaxCar1(that.obj, that.data1).then(res => {
                    that.goodsXinxi = res.res
                })
            }
            
        },
        methods: {
            async del(LikeID) {
                this.$confirm('确定取消收藏吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.del1(LikeID)
                }).catch(() => {
                    //this.$message({
                    //    type: 'info',
                    //    message: '已删除'
                    //});
                });
            },
            async del1(LikeID) {
                var that = this
                that.obj.type = "POST"
                that.obj.url = "tools/Likeds.ashx"
                that.data1.t = "2"
                that.data1.LikeID = LikeID
                await sendAjaxCar1(that.obj, that.data1).then(res => {
                    if (res.status == "已删除！") {
                        //无感操作
                        that.goodsXinxi = that.goodsXinxi.filter(item => {
                            return item.LikeID != LikeID
                        })
                        this.$message({
                            message: '取消收藏成功~',
                            type: 'success'
                        })
                    } else {
                        this.$message.error('修改失败，请联系工作人员~');
                    }
                })
            }
        }
    })
</script>
